<template>
  <div class="wrap">
    <template>
      <fill-header :step="2"/>
    </template>
    <div class="fill-wrap">
      <div class="fill-main flex flex-justify-around">
        <div class="fill-left">
          <div class="fill-content">
            <div class="top">
              <div class="title">
                <h2 class="blue">{{ $t('fillHeader.identityInfo') }}</h2>
                <p>{{ $t('identity.tips') }}</p>
              </div>
              <div class="progress">
                <div class="bar">
                  <el-progress 
                    :percentage="50" 
                    :show-text="false" 
                    color="#8e71c7"/>
                </div>
                <span>50%</span>
              </div>
            </div>
            <div class="form">
              <div 
                v-for="(item, i) in upoloadList" 
                :key="i" 
                class="item">
                <div class="upload-wrap flex flex-justify-between flex-align-start">
                  <div class="upload-left">
                    <p class="desc font-16">{{ item.text }}</p>
                    <div class="imgList flex">
                      <a 
                        :style="'background-image: url('+item.imageData+');background-size: cover'" 
                        href="javascript:;" 
                        class="add-btn"><div 
                          :class="item.imageData?'':item.error?'red-border':'grey-bg'" 
                          class="add-icon"><span v-if="!item.imageData">+</span><input 
                            type="file" 
                            class="updata" 
                            accept=".gif,.jpg,.jpeg,.png,.mp4" 
                            @change="imgChange(item.desc)"></div></a>
                    </div>
                    <p 
                      v-if="item.remark" 
                      class="desc font-16 grey-9" 
                      style="line-height:30px;">{{ item.remark }}</p>
                  </div>
                  <div class="upload-right">
                    <p class="desc font-16">{{ $t('identity.example') }}</p>
                    <img 
                      :src="item.example" 
                      alt="">
                  </div>
                </div>
              </div>
              <div class="full-width flex flex-justify-center padding">
                <el-button 
                  :disabled="!nextEnabled" 
                  type="primary" 
                  round 
                  @click="save">{{ $t('login.goOn') }}</el-button>
              </div>
            </div>
          </div>
        </div>
        <div class="fill-right">
          <fill-right/>
        </div>
      </div>
    </div>
    <template>
      <sjx_Footer/>
    </template>
  </div>
</template>
<script>
import fillHeader from '../../components/fill-header'
import fillRight from '../../components/fill-right'
import sjx_Footer from '../../components/footer'
import ImageFile from '../../common/image-file'
import base from '../../common/fn.js'
export default {
  components: {
    fillHeader,
    sjx_Footer,
    fillRight
  },
  data() {
    return {
      upoloadList: [
        {
          text: this.$t('identity.idPositive'),
          desc: 'idPositive',
          imageData: '',
          imageUrl: '',
          example: '../static/img/identity-1.png',
          error: false
        },
        {
          text: this.$t('identity.idOpposite'),
          desc: 'idOpposite',
          imageData: '',
          imageUrl: '',
          example: '../static/img/identity-2.png',
          error: false
        },
        {
          text: this.$t('identity.userHoldon'),
          desc: 'userHoldon',
          imageData: '',
          imageUrl: '',
          example: '../static/img/identity-3.png',
          error: false
        }
      ],
      form: {
        idcardPhoto: '',
        idcardPhotoReverse: '',
        idcardFairPhoto: '',
        idcardFairPhotoReverse: '',
        facetimePhoto: '',
        facetimeCount: '1',
        facetimeResult: '1'
      },
      nextEnabled: true
    }
  },
  methods: {
    save() {
      const self = this
      let hasError = false
      let arr = []
      arr = self.upoloadList.slice(0, 2)
      // arr.push(self.upoloadList[4])
      arr.forEach((item, i) => {
        if (!item.imageUrl) {
          item.error = true
          hasError = true
        }
      })
      if (!hasError) {
        let option = {
          header: {
            ...base,
            action: 'U0002VN',
            sessionid: this.$store.state.sessionid
          },
          ...self.form
        }
        self.$axios.$post('', option).then(res => {
          if (res.header.code == 0) {
            self.nextEnabled = false
            this.$router.push('/pay')
          } else {
            self.$message.error(res.header.msg)
          }
        })
      }
    },
    imgChange(desc, ...args) {
      const self = this
      let e = window.event || arguments[0]
      let image = new ImageFile()
      image.compress({ file: e.target.files[0] }).then(res => {
        const imgRes = res
        self.upoloadList.forEach((item, i) => {
          if (desc === item.desc) {
            let option = {
              header: {
                ...base,
                action: 'F0002',
                sessionid: this.$store.state.sessionid
              },
              imageBase64: resURL.split(',')[1],
              imageType: resURL.split(';')[0].split(':')[1]
            }
            this.$axios.$post('', option).then(res => {
              if (res.header.code == 0) {
                item.imageUrl = res.data
                item.imageData = imgresURL
                switch (item.desc) {
                  case 'idPositive':
                    self.form.idcardPhoto = res.data
                    break
                  case 'idOpposite':
                    self.form.idcardPhotoReverse = res.data
                    break
                  case 'docPositive':
                    self.form.idcardFairPhoto = res.data
                    break
                  case 'docOpposite':
                    self.form.idcardFairPhotoReverse = res.data
                    break
                  case 'userHoldon':
                    self.form.facetimePhoto = res.data
                    break
                }
              } else {
                self.$message.error(res.header.msg)
              }
            })
          }
        })
      })
    }
  }
}
</script>
<style>
.el-progress-bar__inner {
  background-color: #3462ff !important;
}
.el-progress-bar__outer {
  height: 9px !important;
}
.el-form--label-top .el-form-item__label {
  display: inline-block;
  text-align: left;
  padding: 0;
}
.el-select {
  width: 100%;
}
.el-button {
  background: #3462ff;
}
.el-button span {
  color: #fff !important;
  font-size: 16px;
}
</style>

<style lang="scss" scoped>
.fill-wrap {
  background: #f7f7f7;
  padding: 20px;
  .fill-main {
    width: 1200px;
    margin: 0 auto;
    .fill-left {
      background: #fff;
      width: 800px;
      .fill-content {
        padding: 15px;
        .top {
          width: 500px;
        }
        .title {
          width: 100%;
          padding: 10px;
          border-bottom: 1px solid #dcdfe6;
          h2 {
            font-size: 29px;
            font-weight: 700;
            line-height: 50px;
          }
          p {
            font-size: 16px;
            line-height: 30px;
            width: 720px;
            margin-bottom: 10px;
          }
        }
        .progress {
          position: relative;
          .bar {
            padding-top: 30px;
          }
          span {
            position: absolute;
            left: 45%;
            color: #3462ff;
          }
        }
        .form {
          padding-bottom: 20px;
          line-height: 40px;
          .el-button {
            width: 140px;
            height: 50px;
            border-radius: 25px;
            box-shadow: 2px 0px 13px rgba(48, 77, 220, 0.45);
          }
          .item {
            padding-top: 50px;
            .upload-left {
              flex: 0 0 330px;
              // width: 316px;
            }
            .upload-right {
              flex: 0 0 350px;
              img {
                height: 120px;
                position: relative;
                top: 95px;
              }
            }
          }
          .add-btn {
            width: 320px;
            display: block;
            text-decoration: none;
            margin: 14px 5px;
            height: 200px;
            .red-border {
              border: dashed 2px red;
            }
            .grey-bg {
              border: dashed 2px #c0c4cc;
              background: rgba(243, 246, 255, 1);
            }
            .add-icon {
              width: 320px;
              height: 200px;
              border-radius: 5px;
              position: relative;
              text-align: center;
              span {
                line-height: 200px;
                font-size: 56px;
                color: #ccc;
              }
              input.updata {
                position: absolute;
                top: 0;
                bottom: 0;
                left: 0;
                opacity: 0;
                width: 100%;
                overflow: hidden;
              }
            }
          }
          .full-width {
            margin-top: 30px;
            width: 316px;
          }
        }
      }
    }
    .fill-right {
      background: #fff;
      width: 317px;
      height: 416px;
    }
  }
}
</style>
